<template>
    <div>
        <Leader v-if="MYROLE==='LEADER'"></Leader>
        <Member v-if="MYROLE==='MEMBER'"></Member>
        <Manager v-if="MYROLE==='MANAGER'"></Manager>
        <Norole v-if="MYROLE==='NOROLE'"></Norole>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import Leader from 'components/main/leader.vue';
import Member from 'components/main/member.vue';
import Manager from 'components/main/manage.vue';
import Norole from 'components/main/home_less.vue';
export default {
  name: "mainIndex",
  components: {
    Leader,
    Member,
    Manager,
    Norole
  },
  data() {
    return {
        MYROLE:"",
    };
  },
  computed: {
    ...mapGetters({
      roleList: 'roleList',
      loginUserInfo: "loginUserInfo"
    })
  },
  methods: {
      getRole(){
        let that_=this;
        let falgRole;
        that_.roleList.forEach(function(item){
            if(item.search("GROUP_MANAGER") != -1){
                that_.MYROLE = "MANAGER";
                falgRole = true;
            }else if(item.search("GROUP_LEADER") != -1){
                that_.MYROLE = "LEADER";
                falgRole = true;
            }else if(item.search("GROUP_MEMBER") != -1){
                that_.MYROLE = "MEMBER";
                falgRole = true;
            }
        })
        if(!falgRole){
            that_.MYROLE = "NOROLE";
        }
      }
  },
  watch: {
   roleList(newVal, oldVal) {
      this.getRole()
   }
  },
  mounted() {
      this.getRole()
  }
};
</script>
